<template>
  <div class="login-container">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" class="demo-ruleForm" status-icon>
      <div class="title-container">辽宁房产数据大屏</div>
      <el-form-item prop="userName" class="user-name">
        <el-input v-model="ruleForm.userName" placeholder="请输入用户名">
          <template #prefix>
            <div class="user-icon"><img src="@/assets/img/personInfor/user-icon.png" alt="" /></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="passWord" class="pass-word">
        <el-input v-model="ruleForm.passWord" type="password" placeholder="请输入用户密码">
          <template #prefix>
            <div class="pass-icon"><img src="@/assets/img/personInfor/password-icon.png" alt="" /></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import router from "@/router";
import type { FormInstance, FormRules } from "element-plus";
import { getToken } from "@/api/personInfor";

interface RuleForm {
  userName: string;
  passWord: string;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  userName: "",
  passWord: "",
});
localStorage.setItem("token", "");
const rules = reactive<FormRules<RuleForm>>({
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  passWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "密码长度至少为6位", trigger: "blur" },
  ],
});
// 登录
const login = () => {
  const formData = new FormData();
  formData.append("username", ruleForm.userName);
  formData.append("password", ruleForm.passWord);
  formData.append("randomStr", "");
  formData.append("code", "");
  formData.append("grant_type", "password");
  formData.append("scope", "server");
  formData.append("platform", "sinodom-szmp-admin");
  getToken(formData).then((res) => {
    let { token_type, access_token } = res.data;
    localStorage.setItem("token", token_type + " " + access_token);
    // 跳转首页
    router.replace("/");
  });
};
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      login();
    } else {
    }
  });
};
</script>

<style lang="less" scoped>
.login-container {
  background: url(@/assets/img/personInfor/login-bg.png) no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  width: 100%;
  position: relative;
  .demo-ruleForm {
    background: url("@/assets/img/personInfor/login-form-bg.png") no-repeat;
    background-size: 100% 100%;
    width: 502px;
    height: 602px;
    padding: 0 91px;
    box-sizing: border-box;
    position: absolute;
    top: 186px;
    left: 50%;
    transform: translateX(-50%);
    .title-container {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 36px;
      color: #ffffff;
      margin-bottom: 51px;
      margin-top: 97px;
      text-align: center;
    }
    .user-name,
    .pass-word {
      width: 100%;
      height: 60px;
      margin-bottom: 30px;
    }
    .user-icon,
    .pass-icon {
      width: 30px;
      height: 30px;
      position: relative;
      display: flex;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .user-icon::after,
    .pass-icon::after {
      content: "";
      width: 1px;
      height: 20px;
      background: #113682;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
    }

    .pass-word {
      margin-bottom: 96px;
    }
    ::v-deep .el-input,
    ::v-deep .el-input__wrapper,
    ::v-deep .el-input__inner {
      width: 100%;
      height: 100%;
      padding: 0;
      color: #113682;
      font-size: 20px;
    }
    ::v-deep .el-input__wrapper {
      padding-left: 20px;
      padding-right: 20px;
      box-sizing: border-box;
      position: relative;
    }
    ::v-deep .el-input__prefix-inner > :last-child {
      margin-right: 41px;
    }
    ::v-deep .el-button {
      width: 100%;
      height: 60px;
      text-align: center;
      font-size: 20px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: #ffffff;
      background: url("@/assets/img/personInfor/bth_highlight.png") no-repeat;
      background-size: 100% 100%;
      border: none !important;
    }
  }
}
</style>
